<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JFile</title>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<script src='js/jquery.js'></script>
<script src="toolbar/jquery.toolbar.js"></script>
<link rel="stylesheet" href="toolbar/jquery.toolbar.css"/>
<!--表格-->
<link rel="stylesheet" href="css/jsgrid.css"/>
<script src='js/jsgrid.js'></script>
<script src='js/JWebSocket.js'></script>
<!--瀑布流-->
<!--<script src='js/jquery.waterfall.js'></script>-->
<script src="js/screenlog.js"></script>
<base href=""/>
<script type="text/javascript">

    function dosearch() {

        var content = $("input[name='content']").val();
        var url = "/get";
        var countries = [
            {Name: "", Id: 0},
            {Name: "United States", Id: 1},
            {Name: "Canada", Id: 2},
            {Name: "United Kingdom", Id: 3}
        ];
        $.ajax({
            url: url,
            type: 'get',
            data: {'content': content},
            cache: false
        }).success(function (res) {
            $("#jsGrid").jsGrid({
                width: "100%",
                height: "700px",
                inserting: true,
                editing: false,
                sorting: true,
                paging: false,
                data: res,
                fields: [
                    {name: "name", title: "文档名", type: "text", width: 150, validate: "required"},
                    {name: "text", title: "内容", type: "number", width: 350},
                    {name: "path", title: "路径", type: "text", width: 200},
                    {name: "rid", title: "rid", type: "select", items: countries, valueField: "Id", textField: "Name"},

                    {type: "control"}
                ]
            });
        }).error(function (res) {

        });
    };

    function cindex() {
        var url = "/cindex";
        $.ajax({
            url: url,
            type: 'get',
            data: {'content': ''},
            cache: false
        }).success(function (res) {
            alert(res);
        }).error(function (res) {
            alert(res);
        });
    }

    function deleteIndex() {
        var url = "/deleteIndex";
        $.ajax({
            url: url,
            type: 'get',
            data: {'content': ''},
            cache: false
        }).success(function (res) {
            alert(res);
        }).error(function (res) {
            alert(res);
        });
    }

    var jsocket = new JWebSocket({
        uri: 'jfileSocketServer/1', projectName: '', message: function (msg) {
            console.log(msg.data)
        }
    });

    function resolve() {
        jsocket.open_connet();
    }
</script>
<style>
    * {
        margin: 0;
    }

    .left {
        float: left;
        width: 300px;
        margin: auto;
        position: relative;
    }

    .right {
        position: absolute;
        margin-left: 300px;;
    }

    .high_light {
        background-color: yellow;
    }

    .box {
        float: left;
        padding: 10px;
        border: 1px solid #ccc;
        background: #f7f7f7;
        box-shadow: 0 0 8px #ccc;
    }

    .box:hover {
        box-shadow: 0 0 10px #999;
    }

    .box img {
        width: 50px;
    }

</style>
<!--[if IE]>
<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div>
    <div class="left">
    </div>
    <div class="right">
        <button onclick="hhh()">ddd</button>
        <button onclick="ooo()">000</button>
        <div style="width: 100%;height:50px">
            <div class="search_box">
                    <span class="span1">
                        <input type="text" name="content" id="search_content" class="input s_icon"
                               placeholder="请输入关键词/文档名称/文档内容"/>
                    </span>
                <span class="span2">
                        <input type="button" onclick="dosearch()" value="搜索" class="button"/>
                    </span>
            </div>
        </div>
        <div id="jsGrid"></div>
    </div>
</div>
<!--<div class="btn-toolbar btn-toolbar-info"></div>-->
<br><br><br><br>
<div data-toolbar="toolbar-options"
     class="btn-toolbar btn-toolbar-primary pull-left" data-toolbar-event="click" data-toolbar-style="primary"><i
        class="fa fa-plane"></i></div>
<div id="toolbar-options" class="toolbar-icons hidden">
    <a href="#"><i class="fa fa-plane"></i></a>
    <a href="#"><i class="fa fa-car"></i></a>
    <a href="#"><i class="fa fa-bicycle"></i></a>
</div>

</body>
<script>
    $('div[data-toolbar="toolbar-options"]').toolbar({
        content: '#toolbar-options',
        position: 'top',
    });
    $('.box').toolbar({
        content: '#toolbar-options'
    });

    screenLog.init({
        bgColor: '#f5fafe',
        logColor: 'lightgreen',
        infoColor: 'blue',
        warnColor: 'orange',
        errorColor: 'red',
        freeConsole: false,
        css: '',
        autoScroll: true
    });

    function hhh() {

        $(".left1").slideUp();
    }

    function ooo() {

        $(".left1").slideDown();
    }

</script>
</html>